<template>
    <view class="container" v-if="show">
        <view class="title">基础信息</view>
        <view class="module">
            <view class="flex-between rowline">
                <view>商品分类</view>
                <view>{{ Product.ProductCategoryName }}</view>
            </view>
            <view class="rowTextarea">
                <view>商品名称</view>
                <textarea :disabled="true" maxlength="50" v-model="Product.ProductName"></textarea>
            </view>
            <view class="rowImg">
                <view class="row-label">商品主图</view>
                <view class="imgbox" style="flex: 1">
                    <img-item :data="Product.ThumbnailUrl410" :look="look" :num="1"></img-item>
                </view>
            </view>
        </view>
        <view class="title">销售信息</view>
        <view class="module">
            <view class="flex-between rowline">
                <view>单位</view>
                <view>{{ Product.Unit }}</view>
            </view>
            <view class="flex-between rowline">
                <view>价格</view>
                <input
                    type="number"
                    v-model="Product.V_GradePrice"
                    :disabled="look == 1"
                    placeholder="请输入价格"
                    placeholder-class="placeColor" />
            </view>
            <view class="flex-between rowline">
                <view>库存</view>
                <input
                    type="number"
                    v-model="Product.ProductSkuList[0].Stock"
                    :disabled="look == 1"
                    placeholder="请输入库存"
                    placeholder-class="placeColor" />
            </view>
        </view>
        <view class="title">其他信息</view>
        <view class="module">
            <view class="flex-between rowline">
                <view>编码</view>
                <view class="flex-start"
                    ><input
                        type="text"
                        v-model="Product.ProductCode"
                        :disabled="look == 1"
                        placeholder="请输入编码"
                        placeholder-class="placeColor" /><iconsfont
                        v-if="look == 0"
                        style="margin-left: 10rpx"
                        customIcons="icon-xiugai"
                        :color="'#999'"
                        size="32"></iconsfont
                ></view>
            </view>
            <view class="flex-between rowline" @click="selectProductline">
                <view>产品线</view>
                <view>{{ Product.LineName }}</view>
            </view>
            <view class="rowImg">
                <view class="row-label">轮播图片</view>
                <view class="imgbox" style="flex: 1">
                    <img-item :data="Product.ImageUrl" :look="look" :num="9"></img-item>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import imgItem from "@/pages_supplier/components/form/img-item.vue"
import { GetProductToSupplierModel } from "@/pages_supplier/service/api/supplier.js"
export default {
    components: {
        imgItem,
    },
    data() {
        return {
            show: false,
            id: "",
            Product: {},
            look: "1",
            ProductToSupplierList: [],
        }
    },
    mounted() {
        this.getinfo()
    },
    onLoad(e) {
        this.id = e.id
    },
    methods: {
        getinfo() {
            let path = "?productId=" + this.id
            GetProductToSupplierModel(path).then((res) => {
                if (res.State == 1) {
                    this.Product = res.Data.Product
                    this.ProductToSupplierList = res.Data.ProductToSupplierList
                    this.show = true
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
    },
}
</script>

<style lang="scss">
.container {
    padding: 12rpx 12rpx 12rpx 12rpx;
}
.title {
    margin: 12rpx 12rpx 0 12rpx;
    height: 88rpx;
    background: #ececec;
    border-radius: 8rpx 8rpx 0px 0px;
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    padding-left: $app-item-padding;
    display: flex;
    align-items: center;
}

.module {
    background: #fff;
    border-radius: 8rpx 8rpx 0px 0px;
    padding: 0 $app-item-padding;
    margin-bottom: 24rpx;
    .rowline {
        height: 112rpx;
        align-items: center;
        color: #333333;
        font-size: 32rpx;
        border-bottom: 3rpx solid #ebebeb;
        input {
            text-align: right;
            height: 112rpx;
        }
    }
    .border {
        border-bottom: 3rpx solid #ebebeb;
        padding-bottom: 24rpx;
    }
    .rowline:last-child {
        border-bottom: none;
    }
    .placeColor {
        font-size: 30rpx;
        color: $color-gray-3;
    }
    .rowTextarea {
        & > view {
            height: 86rpx;
            color: #333333;
            font-size: 32rpx;
            display: flex;
            align-items: center;
        }
        textarea {
            width: calc(100% - 48rpx);
            padding: $app-item-padding;
            height: 84rpx;
            background: #f7f7f7;
            border-radius: 8rpx;
        }
    }
    .rowImg {
        display: flex;
        justify-content: flex-start;
        padding-top: 32rpx;

        .tips {
            display: block;

            padding-bottom: 24rpx;
            font-size: 20rpx;
            color: #cccccc;
        }
    }
    .rowline-start {
        display: flex;
        justify-content: flex-start;
    }
    .tags {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        flex: 1;
        .flex-start {
            padding-right: 32rpx;
        }
    }
    .row-label {
        margin-right: 44rpx;
        max-width: 180rpx;
    }
}
.red {
    color: #ef1f1f;
    padding-right: 4rpx;
}
.imginsertion {
    font-size: 24rpx;
    color: #333333;
    margin-top: -24rpx;
    padding-bottom: 16rpx;
}
.noselect {
    width: 26rpx;
    height: 26rpx;
    border: 2rpx solid #b2b2b2;
    border-radius: 8rpx;
    margin-right: 12rpx;
}
.yesselect {
    width: 30rpx;
    height: 30rpx;
    background: $app-color-main;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    margin-right: 12rpx;
    .iconselect {
        margin-top: 8rpx;
    }
}

.btn {
    margin: 16rpx 30rpx 0 30rpx;
}
</style>
